<template>
  <view>
    <u-popup
      :show="show"
      mode="center"
      :safeAreaInsetBottom="false"
      :round="10"
      @close="handleClose"
      @open="handleOpen"
      :closeOnClickOverlay="true"
    >
      <view class="qrcode-popup">
        <!-- 标题 -->
        <view class="popup-header">
          <text class="popup-title">{{ title || '小程序二维码' }}</text>
          <view class="close-btn" @click="handleClose">
            <text class="close-icon">×</text>
          </view>
        </view>
        
        <!-- 二维码容器 -->
        <view class="qrcode-container">
          <image 
            :src="qrcodeImage" 
            class="qrcode-image"
            @longpress="saveToAlbum"
            mode="aspectFit"
          ></image>
        </view>
        
        <!-- 提示文字 -->
        <view class="tip-text">
          <text class="main-tip">更多功能请前往小程序中使用</text>
          <text class="save-tip">长按保存</text>
        </view>
        
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <u-button
            text="保存到相册"
            shape="circle"
            color="#588bf3"
            @click="saveToAlbum"
            :customStyle="saveButtonStyle"
          />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "QRCodePopup",
  props: {
    // 控制弹窗显示
    show: {
      type: Boolean,
      default: false
    },
    // 二维码图片地址
    qrcodeImage: {
      type: String,
      default: '/static/images/wx_show_code.jpg'
    },
    // 弹窗标题
    title: {
      type: String,
      default: '小程序二维码'
    }
  },
  data() {
    return {
      saveButtonStyle: {
        color: "#FFF",
        width: "80%",
        height: "80rpx",
        marginTop: "20rpx"
      }
    }
  },
  methods: {
    // 保存到相册
    saveToAlbum() {
      if (!this.qrcodeImage) {
        uni.showToast({
          title: '二维码图片不存在',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '保存中...'
      })
      
      // 直接保存图片到相册
      uni.saveImageToPhotosAlbum({
        filePath: this.qrcodeImage,
        success: () => {
          uni.hideLoading()
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          this.$emit('save-success')
        },
        fail: (err) => {
          uni.hideLoading()
          if (err.errMsg.includes('auth deny')) {
            uni.showModal({
              title: '提示',
              content: '需要您授权保存图片到相册',
              confirmText: '去设置',
              success: (modalRes) => {
                if (modalRes.confirm) {
                  uni.openSetting()
                }
              }
            })
          } else {
            uni.showToast({
              title: '保存失败',
              icon: 'none'
            })
          }
          this.$emit('save-fail', err)
        }
      })
    },
    
    // 关闭弹窗
    handleClose() {
      this.$emit('close')
    },
    
    // 打开弹窗
    handleOpen() {
      this.$emit('open')
    }
  }
}
</script>

<style lang="scss" scoped>
.qrcode-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f5f5f5;
}

.close-icon {
  font-size: 40rpx;
  color: #999;
  line-height: 1;
}

.qrcode-container {
  position: relative;
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2rpx solid #eee;
  border-radius: 10rpx;
}

.qrcode-image {
  width: 400rpx;
  height: 400rpx;
  border-radius: 8rpx;
}

.tip-text {
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .main-tip {
    color: #333;
    font-size: 28rpx;
    margin-bottom: 10rpx;
  }
  
  .save-tip {
    color: #999;
    font-size: 24rpx;
  }
}

.action-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>